<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑班级信息</title>
<link rel="stylesheet" href="../../../css/radio/style.css">
<link rel="stylesheet" href="../../../css/Semantic/semantic.min.css" />
<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<script src="../../../layui/layui.js"></script>
<script src="../../../js/vue/vue.js"></script>
<script src="../../../js/vue/axios.min.js"></script>


<style type="text/css">
.zth-container {
	margin-top: 40px;
	margin-left: 30%;
	padding-bottom:50px;
	width: 350px;
	
}

.zth-container-but {
	text-align: center;
	margin-top: 20px;
	margin-left: 10px;
}

.layui-form-label {
	width: auto;
}
</style>
</head>
<body>
	<div id="app">
	
		<div class="zth-container">
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">姓名</label>
				<div class="layui-input-block">
					<input type="text"  v-model="name" name="name" lay-verify="title"
						autocomplete="off" placeholder="请输入姓名" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<div class="wrapper">
						<input type="radio" v-model="sex" name="sex" value="1" id="option-1"> 
						<input type="radio"  v-model="sex"  name="sex" value="2" id="option-2">
						 <label for="option-1" 
							class="option option-1">
							<div class="dot"></div> <span>男</span>
						</label> <label for="option-2" class="option option-2">
							<div class="dot"></div> <span>女</span>
						</label>
					</div>
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">年龄</label>
				<div class="layui-input-block">
					<input type="number" name="age" v-model="age"  lay-verify="title"
						autocomplete="off" placeholder="请输入年龄" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">联系方式</label>
				<div class="layui-input-block">
					<input type="text"  name="name" v-model="phone"  lay-verify="title"
						autocomplete="off" placeholder="请输入联系方式" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">身份证号</label>
				<div class="layui-input-block">
					<input type="text"  name="name" lay-verify="title"
						autocomplete="off" placeholder="请输入身份证号" v-model="identity" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">地址</label>
				<div class="layui-input-block">
					<input type="text"  name="name" lay-verify="title"
						autocomplete="off" placeholder="请输入地址" v-model="address" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">密码</label>
				<div class="layui-input-block">
					<input type="password"  name="name" lay-verify="title"
						autocomplete="off" placeholder="请输入地址" v-model="password" class="layui-input">
				</div>
			</div>
			
				<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">头像</label>
				<div class="layui-input-block">
					<div class="layui-upload-drag" id="imgs">
						<i class="layui-icon"></i>
						<p>点击上传，或将文件拖拽到此处</p>
						<div class="layui-hide" id="uploadDemoView">
							<hr>
							<img src="" alt="上传成功后渲染" id="demo1" style="max-width: 196px">
						</div>
					</div>
				</div>
			</div>

			<div class="zth-container-but">
				<button type="button" class="layui-btn" @click="edit">提交</button>
				<button type="button" class="layui-btn layui-btn-primary" id="close"
					onclick="close()">关闭</button>
			</div>
		</div>
	</div>
	<script src="../../../js/jquery.min.js"></script>
	<script type="text/javascript">
	//截取id
	var href=location.href;
	var index=href.indexOf("?");
	var sub=href.substr(index,href.length);
	
	var vm=new Vue({
		el:'#app',
		data(){
			return{
				student_id:0,//学生id
				name:'',//姓名
				age:0,//年龄
				sex:1,//性别
				phone:'',//电话
				address:'',//地址
				identity:'',//身份证号
				file_id:'',//头像id
				url:'',//头像路径
				a_id:'',//账号id
				spos_id:0,//学生职位id
				username:'',//账号
				password:'',//密码
				
				grade_id:0,//班级id
				
				grade:[]//储存所有班级
			}
		},
		 mounted:function(){
			this.studentShow();
		},
		methods:{
			edit:function(){
				//特殊字符
				  var flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]");
				//中文
				  var patrn=/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi; 
				//英文  
				var p = /[a-z]/i;
				 if(
						this.name!=''&&!flag.test(this.name)&&
						this.age!=0&&
						this.phone!=''&&!flag.test(this.phone)&&!patrn.exec(this.phone)&&!p.test(this.phone)&&
						this.address!=''&&!p.test(this.address)&&
						this.identity!=''&&!flag.test(this.identity)&&!patrn.exec(this.identity)&&
						this.password!=''&&!flag.test(this.password)&&!patrn.exec(this.password)
						
						
				){ 
					var params =new URLSearchParams();
					params.append('student_id',this.student_id);
					params.append('name',this.name);
					params.append('age',this.age);
					params.append('sex',this.sex);
					params.append('phone',this.phone);
					params.append('identity',this.identity);
					params.append('address',this.address);
					params.append('password',this.password);
					params.append('a_id',this.a_id);
					params.append('url',this.url);
					params.append('file_id',this.file_id);
					params.append('spos_id',this.spos_id);
					axios.post('/student/edits',params).then(res=>{
						console.log(res);
						if(res.data>0){
							succeed();
						}else{
							layer.msg('失败！');
						}
						
					},err=>{
						console.log(err);
					})
				 }else{
					alert("您填写有误！");
				}  
				
			},
			studentShow:function(){
				axios.get('/student/findById'+sub).then(res=>{
					var o=res.data.data;
					console.log(o);
					this.name=o.name;
					this.sex=o.sex;
					this.age=o.age;
					this.phone=o.phone;
					this.identity=o.identity;
					this.address=o.address;
					this.password=o.password;
					this.a_id=o.a_id;
					this.file_id=o.file_id;
					this.spos_id=o.spos_id;
					this.student_id=o.student_id;
					this.url=o.url;
					layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', o.url); 
				},err=>{
					console.log(err);
				});
			}
			
		} 
	});
	//操作成功
	function succeed() {
		 layui.use(['form', 'jquery'], function() {
			layer.alert("编辑成功！", function() {
				window.parent.refresh();
				
			});
		}); 
		
	}
	
	//关闭
	layui.use(['form', 'jquery'], function() {
		
	  $("#close").on('click',function(){
		layui.use(['form', 'jquery'], function() {
				var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
				parent.layer.close(index);
				//关闭父级页面的表格
				parent.layui.table.reload('testReload');
		});
	});
	
	});
	
	
	layui.use(['form', 'layedit', 'laydate','upload','jquery'], function(){
		  var form = layui.form
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,laydate = layui.laydate
		  ,upload = layui.upload
		  ,$=layui.jquery;
		  
		  
		//普通图片上传
		  upload.render({
			    elem: '#imgs'
			    ,url: '/file/eupload' //改成您自己的上传接口
			    ,done: function(res){
			    	console.log(res);
			      layer.msg('选择成功');
			      vm.url= res.url;
			       layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.url); 
			    }
			  });
	});
	</script>
</body>
</html>